<template>
  <div class="upImgList" :style="nodeWidth ? 'width:' + nodeWidth : ''">
    <div class="upImgItem">
      <div
        v-if="!headImg"
        :style="'line-height:' + nodeWidth"
        :class="'upImg iconfont icon-shangchuan'"
      ></div>
      <img v-if="headImg" :src="headImg" />
      <input
        accept="image/*"
        ref="file"
        type="file"
        @change="upImgFn($event)"
      />
      <div v-if="headImg" class="upIcon iconfont icon-shangchuan"></div>
    </div>
  </div>
</template>

<script>
import bus from "@/assets/evnetBus";

export default {
  components: {},
  data() {
    return {
      headImg: this.propImg,
      upMoreImgLoad: false,
      nodeBgc: "#f7f8fa",
      nodeColor: "#ccc",
      nodeWidth: "100px"
    };
  },
  props: {
    propImg: String,
    bgc: String,
    width: String,
    propIndex: Number
  },
  methods: {
    upImgFn(e) {
      let file = e.target.files[0];
      let formData = new FormData(); // 可以增加表单数据
      formData.append("file", file);
      if (!this.upMoreImgLoad) {
        this.upMoreImgLoad = true;
        const loading = this.$loading({
          lock: true,
          text: "上传中,请耐心等待~",
          spinner: "el-icon-loading",
          background: "rgba(255, 255, 255, 0.7)"
        });
        $.ajax({
          url: this.apis + "/common/Upload/UpImg",
          dataType: "json",
          type: "post",
          processData: false,
          contentType: false,
          data: formData,
          success: res => {
            if (res.code == 1) {
              this.headImg = res.data.src;
              let data = res.data.src;
              if (this.propIndex || this.propIndex == 0) {
                data = {
                  src: res.data.src,
                  index: this.propIndex
                };
              }
              this.$emit("upImgSuccess", data);
            } else {
              this.$message(res.msg);
            }
            loading.close();
            this.upMoreImgLoad = false;
          },
          error: res => {
            loading.close();

            this.upMoreImgLoad = false;
            this.$message("上传超时");
          }
        });
      }
    }
  },
  mounted() {
    bus.$on("busBannerImg", data => {
      this.headImg = data;
    });
  },
  created() {
    if (this.width) {
      this.nodeWidth = this.width;
    }
    if (this.bgc) {
      this.nodeBgc = this.bgc;
      this.nodeColor = "#fff";
    }
  }
};
</script>

<style scoped lang="less">
.upImgList {
  flex: 1;
  width: 100px;
  box-sizing: border-box;
  .upImgItem {
    width: 100%;
    font-size: 0px;
    border-radius: 5px;
    background-color: #f7f8fa;
    position: relative;
    margin-bottom: 30px;
    border: 1px solid #f7f8fa;
    box-sizing: border-box;
    .upImg {
      width: 100%;
      text-align: center;
      // line-height: 100px;
      font-size: 40px;
      color: #ccc;
    }
    input {
      width: 100%;
      height: 100%;
      opacity: 0;
      position: absolute;
      top: 0;
      left: 0;
    }
    img {
      width: 100%;
    }
    .upIcon {
      position: absolute;
      bottom: 0;
      right: 0;
      font-size: 18px;
      color: #fff;
      width: 30px;
      height: 30px;
      background-color: black;
      text-align: center;
      line-height: 30px;
      border-radius: 15px 0px 0 0;
    }
  }
}
</style>
